<!--选择到货通知-->
<template>

    <div class="page-box">
       <div class="page-search">
            <div>
                <label>到货通知单编号</label>
                <el-input v-model="searchForm.Number" style="width: 160px;" placeholder="请输入到货通知单编号"></el-input>
            </div>
            <div>
                <label>入货仓</label>
                <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择入货仓">
                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName" :value="Warehouse.Id"></el-option>
                </el-select>
            </div>
            <div>
                <label>供应商</label>
                <el-select v-model="searchForm.VendorId" style="width: 160px;" placeholder="请选择供应商">
                    <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName"  :value="Vendor.Id"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>

       <div class="page-section">
            <!--数据表格-->
            <el-table :data="tableData" row-key="Id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
            ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="Number" label="通知单编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="VendorName" label="供应商" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WareHouseName" label="入货仓" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="DeliveryDate" label="交货日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.DeliveryDate | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ReceiveDate" label="到货时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ReceiveDate | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="Checked(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
       </div>
       <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />

       

    </div>
    
</template>

<script>


import Pagination from '@/components/Pagination.vue';
export default {
    components:{
        Pagination,
    },
    data(){
        return {
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },

            WarehouseList: [],
            VendorList: [],
            searchForm: {
                Number: '',
                VendorId: '',
                WarehouseId: '',
                Status:'1',
            },
            isLoading:false,
            tableData:[]
        }
    },
    mounted(){
        this.dataBind();
        this.getWarehouseData();
        this.getVendorData();
    },
    methods:{
        dataBind(){
            
            this.isLoading = true;
            this.$http.get('/api/WareHouseInboundBill',{
                params:{
                    PageIndex: this.pageDomain.PageIndex,
                    PageSize: this.pageDomain.PageSize,
                    Number: this.searchForm.Number,
                    VendorId: this.searchForm.VendorId,
                    WarehouseId: this.searchForm.WarehouseId,
                    Status:this.searchForm.Status
                }
            })
            .then((res)=>{
                this.tableData=res.Data;
                this.isLoading = false;
            })
        },
        Checked(model){
            this.$emit('callback',model);
        },
        search(){
            this.dataBind();
        },
        reset() {
            this.searchForm.Number = '';
            this.searchForm.VendorId = '';
            this.searchForm.WarehouseId = '';
        },


        //获取仓库数据
        getWarehouseData() {
            this.$http.get('/api/Warehouse/GetAll')
                .then(res => {
                    this.WarehouseList=res.Data;
                })
        },

        //获取供应商数据
        getVendorData() {
            this.$http.get('/api/Vendor/GetAll')
                .then(res => {
                    this.VendorList=res.Data;
                })
        },

        //分页方法
        handleSizeChange(val) {
        this.pageDomain.PageIndex = 1;
        this.pageDomain.PageSize = val;
        this.dataBind();
        },
        handleCurrentChange(val) {
        this.pageDomain.PageIndex = val;
        this.dataBind();
        }
    }
}

</script>

<style scoped></style>
